/** all sections **/
* {
  margin: 0;
  padding: 0;
  font-variant-ligatures: none;
}
:root {
	--main-color: #086587;
	--sec-color: #ff5959;
	--bg-color-one: #F8F8F7;
	--bg-color-two: #cccccc;
	--header-color: #171E20;
	--text-color: #171E20;
	--baji-one: #D95284;
	--baji-two: #81A691;
	--nibib-one: #055594;
	--niehs-one: #4f8210;
	--recipe-one: #3C9472;
	--lem-one: orange;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-color-one);
}
body {
	display: flex;
	flex-direction: row;
	max-width: 1920px;
}
h1, h2, h3, h4, p, li, a {
	font-family: 'Lato', sans-serif;
	color: var(--text-color);
}
h1, h3, h4 {
	padding-bottom: 1rem;
	scroll-margin: 10px;
}
h1 {
	font-size: 3rem;
}
h2 {
	font-size: 2rem;
	scroll-margin: 10px;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.2rem;
}
p {
	line-height: 1.5;
}
p, ul {
  font-size: 1.2rem;
  padding-bottom: .5rem;
}
ul li ul {
	padding-bottom: 0px;
}
a {
	text-decoration: none;
}
a:hover {
	color: var(--sec-color);
}
p::selection, h1::selection, h2::selection, 
h3::selection, h4::selection, a::selection,
br::selection, li::selection, span::selection, strong::selection {
	color: white;
	background: var(--sec-color);
}
img::selection {
	background: white;
}
.scroll {
	scroll-margin: 10px;
}
.list li {
	font-size: 1.2rem;
	margin-bottom: .5rem;
}
.list li::marker {
	content: "\21C0  ";
}
.list {
	margin-left: 1rem;
}


/** Navbar **/
#navbar {
  background-color: var(--bg-color-one);
  font-family: "Source Code Pro", monospace;
  position: fixed;
  
  width: 15%;
}

#navbar ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  list-style: none;
  margin-top: 4rem;
  /** margin-right: 1em; **/
}

#navbar li a {
  font-weight: thin;
  display: block;
  padding-bottom: 2rem;
  text-align: right;
}

#navbar li a:hover {
  /**background-color: #121218;**/
  color: var(--sec-color);
  padding-right: .5rem;
}

#navbar li a:hover::selection {
	color: white;
	background: var(--main-color);
}

/** Main Page **/
#main-doc {
	width: 80%;
	position: absolute;
	left: 15%;
	margin-top: 4rem;
	margin-left: 3rem;
	display: flex;
	flex-direction: row;
	max-width: 1080px;
}

#home-bio h1 {
	padding-bottom: 0rem;
}

#adj-noun {
	color: var(--main-color);
}

#profile-pic {
	width: 100%;
	border-radius: 15px;
}

.project-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 3rem;
  grid-row-gap: 3rem;
}

.project-tile {
  width: 100%;
  display: block;
  position: relative;
  text-decoration: none;
}

.project-titlebox {
	position: absolute;
	bottom: 0rem;
	width: 100%;
	height: 4rem;
	background-color: var(--bg-color-one);
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
.project-titlebox h2 {
	position: absolute;
	bottom: 0;
	padding: 1rem;
}

.project-tile img {
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: transform 330ms ease-in-out;
}

.project-tile:hover {
	transform: scale(1.05);
	transition: transform 330ms ease-in-out;
	transition: box-shadow 330ms ease-in-out;
	color: var(--sec-color);
  }

.project-tile img:hover ~ div h2 {
	color: var(--sec-color);
}

.project-tile p {
  padding-bottom: 1rem;
}

/** ABOUT ME**/

#about-me {
  display: grid;
  width: 100%;
  max-width: 960px;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2rem;
}
#about-me h1 {
	padding-left: 4rem;
}

.emoji {
	grid-column: span 1;
	text-align: right;
	font-size: 2rem;
	color: var(--main-color);
}
.aboutme-cat {
	grid-column: span 5;
}

.aboutme-cat p {
	line-height: 1.5rem;
}

/** Projects **/
.projects h2 {
	display: flex;
	align-items: center;
}

/**Project Colors**/
#baji-projects h2::after {
	content: '';
	flex: 1;
	margin-left: 1rem;
	margin-top: 4px;
	height: 6px;
	background-color: var(--baji-one);
}

#baji-projects h3::before {
	content: '|';
	flex: 1;
	color: var(--baji-one);
	text-shadow: 2px 0 var(--baji-one);
	font-weight: 900;
	margin-right: 9px;
	position: relative;
	top: -1px;
}

#baji-projects h4::before {
	content: '|| ';
	flex: 1;
	color: var(--baji-one);
	position: relative;
	top: -1px;
}

#baji-subtitle {
	color: var(--baji-one);
	font-size: 1.5rem;
	padding-bottom: 2rem;
}

#recipe-projects h2::after {
	content: '';
	flex: 1;
	margin-left: 1rem;
	margin-top: 4px;
	height: 6px;
	background-color: var(--recipe-one);
}
#recipe-projects h3::before {
	content: '|';
	flex: 1;
	color: var(--recipe-one);
	text-shadow: 2px 0 var(--recipe-one);
	font-weight: 900;
	margin-right: 9px;
	position: relative;
	top: -1px;
}
#recipe-projects h4::before {
	content: '|| ';
	flex: 1;
	color: var(--recipe-one);
	font-weight: 900;
	position: relative;
	top: -1px;
}
#recipe-subtitle {
	color: var(--recipe-one);
	font-size: 1.5rem;
	padding-bottom: 2rem;
}

#nibib-projects h2::after {
	content: '';
	flex: 1;
	margin-left: 1rem;
	margin-top: 4px;
	height: 6px;
	background-color: var(--nibib-one);
}
#nibib-projects h3::before {
	content: '|';
	flex: 1;
	color: var(--nibib-one);
	text-shadow: 2px 0 var(--nibib-one);
	font-weight: 900;
	margin-right: 9px;
	position: relative;
	top: -1px;
}
#nibib-projects h4::before {
	content: '|| ';
	flex: 1;
	color: var(--nibib-one);
	font-weight: 900;
	position: relative;
	top: -1px;
}
#nibib-subtitle {
	color: var(--nibib-one);
	font-size: 1.5rem;
	padding-bottom: 2rem;
}

#niehs-projects h2::after {
	content: '';
	flex: 1;
	margin-left: 1rem;
	margin-top: 4px;
	height: 6px;
	background-color: var(--niehs-one);
}
#niehs-projects h3::before {
	content: '|';
	flex: 1;
	color: var(--niehs-one);
	text-shadow: 2px 0 var(--niehs-one);
	font-weight: 900;
	margin-right: 9px;
	position: relative;
	top: -1px;
}
#niehs-projects h4::before {
	content: '|| ';
	flex: 1;
	color: var(--niehs-one);
	font-weight: 900;
	position: relative;
	top: -1px;
}
#niehs-subtitle {
	color: var(--niehs-one);
	font-size: 1.5rem;
	padding-bottom: 2rem;
}

#lem-projects h2::after {
	content: '';
	flex: 1;
	margin-left: 1rem;
	margin-top: 4px;
	height: 6px;
	background-color: var(--baji-one);
}
#lem-subtitle {
	color: var(--baji-one);
	font-size: 1.5rem;
}

#toc {
	position: fixed;
	right: 10px;
	
	transform-origin: 0% 0%;
	transform: translate(150%, 0);
}

#tocToggle input {
	background-color: red;
	height: 32px;
	position: fixed;
	top: 7px;
	right: 50px;
	
	z-index: 2;
}

#tocToggle input:checked ~ ul {
	transform: none;
}

.col-one, .col-six {
	display: block;
}
.col-one {
	grid-column: span 1;
}
.col-two {
	grid-column: span 2;
}
.col-three {
	grid-column: span 3;
}
.col-four {
	grid-column: span 4;
}
.col-five {
	grid-column: span 5;
}
.col-six {
	grid-column: span 6;
}

.spacer {
	width: 100%;
	height: 2rem;
}
.image {
	max-width: 516px;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.large-image {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.figma-embed {
	display: flex;
	width: 100%;
	height: 450px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.figma-recipe-embed {
	display: flex;
	width: 360px;
	height: 640px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.img-placeholder {
	width: 100%;
	height: 20rem;
	background-color: pink;
}


@media (min-width: 1650px)  and (pointer: fine) {
	.project-tile {
		grid-column: span 2;
	}
	/* .project-tile:nth-child(n+3) {
		grid-column: span 2;
	} */
	#navbar {
		height: vh;
	}
	#navbar a {
		font-size: 1.5rem;
	}
	#home-bio {
		position: absolute;
		text-align: left;
		z-index: -1;
	}
	#muz-is {
		grid-column: span 3;
	}
	#profile-pic {
		grid-column: span 2;
	}
	.project-tile {
		grid-column: span 2;
	}
	.homeSpacerOne {
		grid-column: span 2;
	}
	.homeSpacerTwo {
		grid-column: span 2;
	}
}

@media (min-width:701px) and (max-width:1649px) and (pointer: fine) {
	#navbar {
		margin: 0;
		width: 100%;
		height: 4rem;
		z-index: 5;
	}

	#navbar ul {
		margin: 0;
		flex-direction: row;
		justify-content: space-evenly;
		list-style: none;
	}
	
	#navbar a {
		font-size: 1.5rem;
	}
	#navbar li {
		padding: 1rem;
	}
	#navbar li a:hover {
		padding-right: 0rem;
	}
	#main-doc {
		margin: auto;
		margin-top: 6rem;
	}

	#home-bio {
		position: absolute;
		text-align: left;
		z-index: -1;
	}
	#muz-is {
		grid-column: span 6;
		margin: auto;
	}
	#profile-pic {
		grid-column: span 2;
	}
	.project-tile {
		grid-column: span 3;
	}
	.homeSpacerOne {
		padding: 0;
		display: none;
	}
	
}

@media (max-width: 700px) and (pointer: fine){
	#main-doc {
		width: 100%;
		flex-direction: column;
		margin-left: 0;
		left: 0;
	}
	.list {
		padding-left: 1rem;
		padding-bottom: 1.5rem;
	}
	
	#container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#navbar {
		margin: 0;
		width: 100%;
		height: 4rem;
		z-index: 5;
	}

	#navbar ul {
		margin: 0;
		flex-direction: row;
		justify-content: space-evenly;
		list-style: none;
	}
	
	#navbar a {
		font-size: 2rem;
	}
	#navbar li {
		padding: 1rem;
	}
	#navbar li a:hover {
		padding-right: 0rem;
	}
	#home-bio {
		position: relative;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	#muz-is {
		grid-column: span 6;
		text-align: center;
	}
	#profile-pic {
		display: none;
	}
	.homeSpacerOne, .homeSpacerTwo {
		display: none;
	}
	.project-tile {
		grid-column: span 6;
	}
	.col-one {
		grid-column: span 6;
	}
	.col-two {
		grid-column: span 6;
		width: auto;
	}
	.col-three {
		grid-column: span 6;
	}
	.col-four {
		grid-column: span 6;
	}
	.col-five {
		grid-column: span 6;
	}
	.col-six {
		grid-column: span 6;
	}
  
}

@media (min-width:701px) and (max-width:1649px) and (pointer: coarse) {
	#navbar {
		margin: 0;
		width: 100%;
		height: 4rem;
		z-index: 5;
	}

	#navbar ul {
		margin: 0;
		flex-direction: row;
		justify-content: space-evenly;
		list-style: none;
	}
	
	#navbar a {
		font-size: 1.5rem;
	}
	#navbar li {
		padding: 1rem;
	}
	#navbar li a:hover {
		padding-right: 0rem;
	}
	#main-doc {
		margin: auto;
		margin-top: 6rem;
	}

	#home-bio {
		position: absolute;
		text-align: left;
		z-index: -1;
	}
	#muz-is {
		grid-column: span 3;
	}
	#profile-pic {
		grid-column: span 2;
	}
	.project-tile {
		grid-column: span 3;
	}
	.homeSpacerOne, .homeSpacerTwo {
		padding: 0;
		display: none;
	}
	
}

@media (min-width:601px) and (max-width: 980px) and (pointer: coarse) {
	#main-doc {
		width: 100%;
		flex-direction: column;
		margin-left: 0;
		left: 0;
	}
	body {
		width: 100%;
		height: auto;
	}
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 3rem;
	}
	h3 {
		font-size: 2.5rem;
	}
	p, .list li {
		font-size: 2rem;
	}
	.list {
		padding-left: 1rem;
		padding-bottom: 1.5rem;
	}
	
	#container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#navbar {
		margin: 0;
		width: 100%;
		height: 4rem;
		z-index: 5;
	}

	#navbar ul {
		margin: 0;
		flex-direction: row;
		justify-content: space-evenly;
		list-style: none;
	}
	
	#navbar a {
		font-size: 2rem;
	}
	#navbar li {
		padding: 1rem;
		padding-bottom: 2rem;
	}
	#navbar li a:hover {
		padding-right: 0rem;
	}
	
	#home-bio {
		position: relative;
	}

	#muz-is {
		grid-column: span 6;
		text-align: center;
	}
	#profile-pic {
		display: none;
	}
	.homeSpacerOne, .homeSpacerTwo {
		padding: 0;
		display: none;
	}
	.project-tile {
		grid-column: span 6;
	}
	.col-one {
		grid-column: span 6;
	}
	.col-two {
		grid-column: span 6;
		width: auto;
	}
	.col-three {
		grid-column: span 6;
	}
	.col-four {
		grid-column: span 6;
	}
	.col-five {
		grid-column: span 6;
	}
	.col-six {
		grid-column: span 6;
	}
}

@media (max-width: 600px) and (pointer: coarse) {
	#main-doc {
		width: 100%;
		flex-direction: column;
		margin-left: 0;
		left: 0;
	}
	body {
		width: 100%;
		height: auto;
	}
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 3rem;
	}
	h3 {
		font-size: 2.5rem;
	}
	p, .list li {
		font-size: 2rem;
	}
	.list {
		padding-left: 1rem;
		padding-bottom: 1.5rem;
	}
	
	#container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#navbar {
		margin: 0;
		width: 100%;
		height: 4rem;
		z-index: 5;
	}

	#navbar ul {
		margin: 0;
		flex-direction: row;
		justify-content: space-evenly;
		list-style: none;
	}
	
	#navbar a {
		font-size: 6rem;
	}
	#navbar li {
		padding: 0rem;
	}
	#navbar li a:hover {
		padding-right: 0rem;
	}
	
	#home-bio {
		position: relative;
	}

	#muz-is {
		grid-column: span 6;
		text-align: center;
	}
	#profile-pic {
		display: none;
	}
	.homeSpacerOne, .homeSpacerTwo {
		padding: 0;
		display: none;
	}
	.project-tile {
		grid-column: span 6;
	}
	.col-one {
		grid-column: span 6;
	}
	.col-two {
		grid-column: span 6;
		width: auto;
	}
	.col-three {
		grid-column: span 6;
	}
	.col-four {
		grid-column: span 6;
	}
	.col-five {
		grid-column: span 6;
	}
	.col-six {
		grid-column: span 6;
	}
}